<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.keyword" placeholder="关键字"/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="findCurrent">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		<!-- 列表 -->
		<el-table :data="dictionarytypes"
				  highlight-current-row v-loading="listLoading"
				  @selection-change="selsChange"
				  @row-dblclick="rowDrawerClick"
				  style="width: 100%">
			<el-table-column type="selection" width="60">
			</el-table-column>
			<el-table-column type="index" width="100">
		</el-table-column>
			<el-table-column prop="sn" label="编号" width="240" sortable>
			</el-table-column>
			<el-table-column prop="name" label="产品分类" width="240" sortable>
			</el-table-column>
			<el-table-column label="操作" >
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
			<!--<el-pagination layout="prev, pager, next" @current-change="getEmployees" :page-size="5" :total="total" :current-page="currentPage" style="float:right;">-->
			<!--</el-pagination>-->
			<el-pagination
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-size="pageSize"
					layout="prev, pager, next"
					:total="total"
					style="float:right;"
			>
			</el-pagination>
		</el-col>

		<!--编辑界面
			:visible.sync 控制当前窗口是否显示
			:rules  表单校验规则
			ref  给当前表单引用一个别名
		-->
		<el-dialog :title="title"
				   :visible.sync="dictionarytypeFormVisible"
				   :close-on-click-modal="false">
			<el-form :model="dictionarytypeForm" label-width="80px" :rules="dictionarytypeFormRules" ref="dictionarytypeForm">

				<!-- prop="name" 申明表单属性 叫 name -->
				<el-form-item label="编号" prop="sn">
					<el-input v-model="dictionarytypeForm.sn" auto-complete="off"/>
				</el-form-item>
				<el-form-item label="产品分类" prop="name">
					<el-input v-model="dictionarytypeForm.name" auto-complete="off"/>
				</el-form-item>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click.native="dictionarytypeFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="dictionarytypeSubmit" :loading="dictionarytypeLoading">提交</el-button>
			</div>
		</el-dialog>

		<!-- ===============================内层抽屉====================================== -->

		<div>
			<el-drawer :append-to-body="true"
					   :visible.sync="innerDrawer"
					   direction="rtl"
					   size="50%">

				<!--内层抽屉高级查询-->
				<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
					<el-form :inline="true" :model="dicfilters">
						<el-form-item>
							<el-input v-model="dicfilters.dickeyword" placeholder="关键字"/>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" v-on:click="detailfindCurrent">查询</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="detailhandleAdd">新增</el-button>
						</el-form-item>
					</el-form>
				</el-col>

				<!--列表
                -->
				<el-table :data="dictionarydetail"
						  highlight-current-row v-loading="detaillistLoading"
						  @selection-change="detailselsChange"
						  style="width: 100%">
					<el-table-column type="selection" width="60">
					</el-table-column>
					<el-table-column type="index" width="100">
					</el-table-column>
					<el-table-column prop="name" label="分类明细" width="240" sortable>
					</el-table-column>
					<el-table-column label="操作" >
						<template scope="scope">
							<el-button size="small" @click="detailhandleEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button type="danger" size="small" @click="detailhandleDel(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>

				<!--工具条-->
				<el-col :span="24" class="toolbar">
					<el-button type="danger" @click="detailbatchRemove" :disabled="this.sels.length===0">批量删除</el-button>
					<!--<el-pagination layout="prev, pager, next" @current-change="getEmployees" :page-size="5" :total="total" :current-page="currentPage" style="float:right;">-->
					<!--</el-pagination>-->
					<el-pagination
							@current-change="detailhandleCurrentChange"
							:current-page="detailCurrentPage"
							:page-size="detailPageSize"
							layout="prev, pager, next"
							:total="detailtotal"
							style="float:right;"
					>
					</el-pagination>
				</el-col>
			</el-drawer>
			<!--编辑界面
            :visible.sync 控制当前窗口是否显示
            :rules  表单校验规则
            ref  给当前表单引用一个别名
        -->
			<el-dialog :title="detailtitle"
					   :visible.sync="dictionarydetailFormVisible"
					   :close-on-click-modal="false">
				<el-form :model="dictionarydetailForm" label-width="80px" :rules="dictionarydetailFormRules" ref="dictionarydetailForm">

					<!-- prop="name" 申明表单属性 叫 name -->
					<el-form-item label="分类明细" prop="name">
						<el-input v-model="dictionarydetailForm.name" auto-complete="off"/>
					</el-form-item>
				</el-form>

				<div slot="footer" class="dialog-footer">
					<el-button @click.native="dictionarydetailFormVisible = false">取消</el-button>
					<el-button type="primary" @click.native="dictionarydetailSubmit" :loading="dictionarydetailLoading">提交</el-button>
				</div>
			</el-dialog>
		</div>
	</section>
</template>

<script>
	import util from '../../common/js/util'
	//import NProgress from 'nprogress'
	import { getDictionarytypeListPage, removeDictionarytype, batchRemoveDictionarytype, editDictionarytype, addDictionarytype } from '../../api/api';

	export default {
        data() {
            return {
                filters: {
                    keyword: ''
                },
                dictionarytypes: [],
                currentPage: 1,
                total: 0,
                pageSize: 5,
                title: "",
                listLoading: false,
                sels: [],//列表选中行  所有选中对的行都会传进来

                dictionarytypeFormVisible: false,//编辑界面是否显示
                dictionarytypeLoading: false,
                dictionarytypeFormRules: {
                    name: [
                        {required: true, message: '你还没输入名字哦，亲', trigger: 'blur'}
                    ],
                },
                //表单数据数据绑定到模型层
                dictionarytypeForm: {
                    id: null,
                    sn: '',
					name:''
                },
		/* =================================抽屉数据======================================  */
                dicfilters: {
                    dickeyword: ''
                },
				//数据绑定
                dictionarydetail: [],

				// 下拉列表数据
                detailtype:[],
                row:[],
				parentId:null,
                detailCurrentPage: 1,
                detailtotal: 0,
                detailPageSize: 5,
                detailtitle: "",
                detaillistLoading: false,
                detailsels: [],//列表选中行  所有选中对的行都会传进来

				//默认隐藏抽屉
                innerDrawer: false,
                dictionarydetailFormVisible: false,//编辑界面是否显示
                dictionarydetailLoading: false,
                dictionarydetailFormRules: {
                    name: [
                        {required: true, message: '你还没输入名字哦，亲', trigger: 'blur'}
                    ],
                },
				//表单数据数据绑定到模型层
                dictionarydetailForm: {
                    id: null,
                    name:''
                },
			};
        },
        methods: {
	/* ========================================内层抽屉方法========================================== */
            //双击显示内层抽屉
            rowDrawerClick(row) {
                this.row = row
				this.parentId=this.row.id
				 // console.debug("当前行的数据")  //当前行的数据
				 // console.debug(this.row)  //当前行的数据
				//每次子表打开，页码重新赋值为1
                this.detailCurrentPage = 1
				//每次子表打开，每页数据条数重新赋值为5条
                this.detailPageSize = 5
				//品牌id赋值
               this.dictionarydetail.types_id = row.id
				//展示内层抽屉列表
                this.getDictionarydetail();
				//弹出内层抽屉
                this.innerDrawer = true
            },
			// 解决高级查询跳转第一页
            detailfindCurrent(){
                this.detailCurrentPage = 1;
                this.getDictionarydetail();
            },
            detailhandleCurrentChange(val) {
                this.detailCurrentPage = val;
                this.getDictionarydetail();
            },
			//获取用户列表 分页展示
            getDictionarydetail() {
				// alert(detailCurrentPage)
				//  if (detailCurrentPage){
				//      this.detailCurrentPage=detailCurrentPage
				// }
                let dicpara = {
                    types_id:this.row.id,
                    currentPage: this.detailCurrentPage,
                    keyword: this.dicfilters.dickeyword, // 高级查询
                    pageSize: this.detailPageSize
                };
				console.log("选中的行的id")
				console.log(this.row.id)
				console.log(dicpara.currentPage)
				console.log(dicpara.keyword)
				console.log(dicpara.pageSize)
                this.detaillistLoading = true; // 开启忙等框
                this.$http.post("/detail", dicpara)
                    .then(result => {
                        result = result.data;
                        this.dictionarydetail = result.rows;
                        console.log(result.rows)
                        this.detailtotal = result.total; // 动态获取总条数
                        this.detaillistLoading = false; // 关闭忙等框
                    }).catch(result => {
                    console.log(result);
                    alert("系统错误！");
                })
            },

			//删除
            detailhandleDel: function (index, row) {
                this.$confirm('确认删除该记录吗?', '温馨提示', {
                    type: 'warning'
                }).then(() => {// 点击确定
                    this.detaillistLoading = true;// 打开忙等框
					//NProgress.start();
					//let para = { id: row.id };
                    this.$http.delete("/detail/" + row.id).then(result => {
						//关闭加载效果
                        this.detaillistLoading = false;// 关闭忙等框
                        result = result.data; // AjaxResult
						//删除成功提示
                        if (result.success) {
                            this.$message({
                                message: '删除成功！',
                                type: 'success'
                            });
							// 当前页之前的数据总条数
                            let count = (this.detailCurrentPage - 1) * this.detailPageSize;
							// 删除操作后全部数据总条数
                            let nowTotal = this.total - 1;
                            if(count == nowTotal&&this.detailCurrentPage!=1){
                                this.detailCurrentPage = this.detailCurrentPage-1;
								//重新加载列表数据
                                this.getDictionarytypes();
                            }else if((nowTotal-count)>0){
                                this.detailCurrentPage = this.detailCurrentPage;
								//重新加载列表数据
                                this.getDictionarytypes();
                            };

                        } else {
							//删除失败提示
                            this.$message({
                                message: result.message,
                                type: 'error'
                            });
                            this.detailCurrentPage = this.detailCurrentPage
							//重新加载列表数据
                            this.getDictionarytypes();
                        }
                    }).catch(result => {
						//失败提示
                        this.$message({
                            message: result.message,
                            type: 'error'
                        });
                        this.detailCurrentPage = 1;
						//重新加载列表数据
                        this.getDictionarytypes();
                    });
                }).catch(() => {

                });
            },

			//显示编辑界面
            detailhandleEdit: function (index, row) {
                this.detailtitle = "编辑"
                this.dictionarydetailFormVisible = true;
                this.dictionarydetailForm = Object.assign({}, row); // 克隆回显
            },
			//显示新增界面
            detailhandleAdd: function () {
                this.detailtitle = "新增"
                this.dictionarydetailFormVisible = true;
                this.dictionarydetailForm = { // 清空
                    id: null,
                    name:''
                };
            },

			//编辑或者新增 提交表单
            dictionarydetailSubmit: function ()
			{
				// 主动开启表单校验
                this.$refs.dictionarydetailForm.validate((valid) => {
                    if (valid) {// 校验通过
                        this.$confirm('确认提交吗？', '提示', {}).then(() => { // 点击确认
                            this.dictionarydetailLoading = true;
							//NProgress.start();
                            let para = Object.assign({}, this.dictionarydetailForm);// 克隆一份表单数据
                            para.types_id=this.parentId
                            this.$http.put("/detail", para)
                                .then(result => {
                                    console.log("提交表单数据")
                                    console.log(para)
                                    this.dictionarydetailLoading = false;// 关闭忙等
                                    this.dictionarydetailFormVisible = false; // 关闭弹出
                                    result = result.data; // AjaxResult
                                    if (result.success) {
                                        this.$message({
                                            message: '操作成功！',
                                            type: 'success'
                                        });
                                    } else {
										//操作失败提示
                                        this.$message({
                                            message: result.message,
                                            type: 'error'
                                        });
                                    }
                                    this.detailCurrentPage = 1;
									//重新加载列表数据
                                    this.getDictionarydetail();
                                }).catch(result => {
                                this.dictionarydetailLoading = false;// 关闭忙等
                                this.$message({
                                    message: "操作失败",
                                    type: 'error'
                                });
                            })
                        });
                    }
                });
            },

            detailselsChange: function (sels) { // 所以选中的对象都会传进来
                this.sels = sels;
                console.log(sels)
            },
			//批量删除
            detailbatchRemove: function () {
                var ids = this.sels.map(item => item.id);
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => { // 点击确定
                    this.detaillistLoading = true; // 打开忙等框
					//NProgress.start();
					// let para = { ids: ids };

					// axios发送Ajax请求
                    this.$http.patch("/detail", ids).then(result => {
						//关闭加载效果
                        this.detaillistLoading = false;
                        result = result.data; // AjaxResult
						//删除成功提示
                        if (result.success) {
                            this.$message({
                                message: '删除成功！',
                                type: 'success'
                            });
							// 当前页之前的数据总条数
                            let count = (this.detailCurrentPage - 1) * this.pageSize;
							// 删除操作后全部数据总条数
                            let nowTotal = this.total - ids.length;
                            if(count == nowTotal&&this.detailCurrentPage!=1){
                                this.detailCurrentPage = this.detailCurrentPage-1;
								//重新加载列表数据
                                this.getDictionarydetail();
                            }else if((nowTotal-count)>0){
                                this.detailCurrentPage = this.detailCurrentPage;
								//重新加载列表数据
                                this.getDictionarydetail();
                            };
                        } else {
							//删除失败提示
                            this.$message({
                                message: result.message,
                                type: 'error'
                            });
                            this.detailCurrentPage = this.detailCurrentPage;
							//重新加载列表数据
                            this.getDictionarydetail();
                        }
                    }).catch(result => { // 点击取消
						//失败提示
                        this.$message({
                            message: result.message,
                            type: 'error'
                        });
                        this.detailCurrentPage = 1;
						//重新加载列表数据
                        this.getDictionarydetail();
                    });
                }).catch(() => {

                });
            },

    /* ================================================================================== */

            // 解决高级查询跳转第一页
            findCurrent(){
                this.currentPage = 1;
                this.getDictionarytypes();
			},
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getDictionarytypes();
            },
            //获取用户列表 分页展示
            getDictionarytypes() {
                // alert(currentPage)
                //  if (currentPage){
                //      this.currentPage=currentPage
                // }
                let para = {
                    currentPage: this.currentPage,
                    keyword: this.filters.keyword, // 高级查询
                    pageSize: this.pageSize
                };
                console.log(para)
                this.listLoading = true; // 开启忙等框
                this.$http.post("/dictionarytype", para)
                    .then(result => {
                        result = result.data;
                        this.dictionarytypes = result.rows;
                        console.log(22222222222)
                        console.log(result.rows)
                        this.total = result.total; // 动态获取总条数
                        this.listLoading = false; // 关闭忙等框
                    }).catch(result => {
                    console.log(result);
                    alert("系统错误！");
                })
            },

            //删除
            handleDel: function (index, row) {
                this.$confirm('确认删除该记录吗?', '温馨提示', {
                    type: 'warning'
                }).then(() => {// 点击确定
                    this.listLoading = true;// 打开忙等框
                    //NProgress.start();
                    //let para = { id: row.id };
                    this.$http.delete("/dictionarytype/" + row.id).then(result => {
                        //关闭加载效果
                        this.listLoading = false;// 关闭忙等框
                        result = result.data; // AjaxResult
                        //删除成功提示
                        if (result.success) {
                            this.$message({
                                message: '删除成功！',
                                type: 'success'
                            });
                            // 当前页之前的数据总条数
                            let count = (this.currentPage - 1) * this.pageSize;
                            // 删除操作后全部数据总条数
                            let nowTotal = this.total - 1;
                            if(count == nowTotal&&this.currentPage!=1){
								this.currentPage = this.currentPage-1;
                                //重新加载列表数据
                                this.getDictionarytypes();
							}else if((nowTotal-count)>0){
								this.currentPage = this.currentPage;
                                //重新加载列表数据
                                this.getDictionarytypes();
							};

                        } else {
                            //删除失败提示
                            this.$message({
                                message: result.message,
                                type: 'error'
                            });
                            this.currentPage = this.currentPage
                            //重新加载列表数据
                            this.getDictionarytypes();
                        }
                    }).catch(result => {
                        //失败提示
                        this.$message({
                            message: result.message,
                            type: 'error'
                        });
                        this.currentPage = 1;
                        //重新加载列表数据
                        this.getDictionarytypes();
                    });
                }).catch(() => {

                });
            },

            //显示编辑界面
            handleEdit: function (index, row) {
                this.title = "编辑"
                this.dictionarytypeFormVisible = true;
                this.dictionarytypeForm = Object.assign({}, row); // 克隆回显
            },
            //显示新增界面
            handleAdd: function () {
                this.title = "新增"
                this.dictionarytypeFormVisible = true;
                this.dictionarytypeForm = { // 清空
                    id: null,
                    sn: '',
                    name:''
                };
            },

            //编辑或者新增 提交表单
            dictionarytypeSubmit: function () {
                // 主动开启表单校验
                this.$refs.dictionarytypeForm.validate((valid) => {
                    if (valid) {// 校验通过
                        this.$confirm('确认提交吗？', '提示', {}).then(() => { // 点击确认
                            this.dictionarytypeLoading = true;
                            //NProgress.start();
                            let para = Object.assign({}, this.dictionarytypeForm);// 克隆一份表单数据
                            this.$http.put("/dictionarytype", para)
                                .then(result => {
                                    this.dictionarytypeLoading = false;// 关闭忙等
                                    this.dictionarytypeFormVisible = false; // 关闭弹出
                                    result = result.data; // AjaxResult
                                    if (result.success) {
                                        this.$message({
                                            message: '操作成功！',
                                            type: 'success'
                                        });
                                    } else {
                                        //操作失败提示
                                        this.$message({
                                            message: result.message,
                                            type: 'error'
                                        });
                                    }
                                    this.currentPage = 1;
                                    //重新加载列表数据
                                    this.getDictionarytypes();
                                }).catch(result => {
                                this.dictionarytypeLoading = false;// 关闭忙等
                                this.$message({
                                    message: "操作失败",
                                    type: 'error'
                                });
                            })
                        });
                    }
                });
            },

            selsChange: function (sels) { // 所以选中的对象都会传进来
                this.sels = sels;
                console.log(sels)
            },
            //批量删除
            batchRemove: function () {
                var ids = this.sels.map(item => item.id);
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => { // 点击确定
                    this.listLoading = true; // 打开忙等框
                    //NProgress.start();
                    // let para = { ids: ids };

                    // axios发送Ajax请求
                    this.$http.patch("/dictionarytype", ids).then(result => {
                        //关闭加载效果
                        this.listLoading = false;
                        result = result.data; // AjaxResult
                        //删除成功提示
                        if (result.success) {
                            this.$message({
                                message: '删除成功！',
                                type: 'success'
                            });
                          // 当前页之前的数据总条数
                            let count = (this.currentPage - 1) * this.pageSize;
                            // 删除操作后全部数据总条数
                            let nowTotal = this.total - ids.length;
                            if(count == nowTotal&&this.currentPage!=1){
                                this.currentPage = this.currentPage-1;
                                //重新加载列表数据
                                this.getDictionarytypes();
                            }else if((nowTotal-count)>0){
                                this.currentPage = this.currentPage;
                                //重新加载列表数据
                                this.getDictionarytypes();
                            };
                        } else {
                            //删除失败提示
                            this.$message({
                                message: result.message,
                                type: 'error'
                            });
                            this.currentPage = this.currentPage;
                            //重新加载列表数据
                            this.getDictionarytypes();
                        }
                    }).catch(result => { // 点击取消
                        //失败提示
                        this.$message({
                            message: result.message,
                            type: 'error'
                        });
                        this.currentPage = 1;
                        //重新加载列表数据
                        this.getDictionarytypes();
                    });
                }).catch(() => {

                });
            },
        },
        mounted() {
            this.getDictionarytypes();
        },
    }
</script>

<style scoped>

</style>